<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>黄金吃豆人</title>
    <link rel="stylesheet" href="style.css">
    <!-- 设置文档类型和字符编码，引入样式表 -->
</head>
<body>
    <!-- 启动界面 -->
    <div id="startScreen" class="start-screen">
        <!-- 启动界面标题区域 -->
        <div class="start-title">
            <span class="pacman-emoji">😋</span>
            <h1>黄金吃豆人</h1>
            <div class="subtitle">经典像素风闯关小游戏</div>
            <!-- 显示游戏标题和子标题 -->
        </div>
        <!-- 启动界面表单区域 -->
        <div class="start-form">
            <input id="startNameInput" placeholder="请输入昵称" maxlength="8" autocomplete="off">
            <!-- 玩家名称输入框 -->
            <div class="level-select-highlight" style="margin: 16px 0;">
                <label for="startLevelSelect">选择关卡：</label>
                <select id="startLevelSelect">
                    <option value="1">关卡1</option>
                    <option value="2">关卡2</option>
                    <option value="3">关卡3</option>
                </select>
                <!-- 关卡选择下拉菜单 -->
            </div>
            <button id="startBtn">开始游戏</button>
            <!-- 开始游戏按钮 -->
            <div class="start-tip">按 <b>Enter</b> 键也可开始</div>
            <!-- 提示信息 -->
        </div>
        <!-- 启动界面页脚 -->
        <div class="start-footer">© 2025 黄金吃豆人 | 作者：薛馨儿</div>
    </div>
    
    <!-- 主游戏界面 -->
    <div id="mainGame" style="display:none">
        <!-- 页面头部 -->
        <div class="header">
            <h1>黄金吃豆人</h1>
            <!-- 游戏标题 -->
            <div class="subtitle">经典像素风闯关小游戏</div>
            <!-- 子标题 -->
        </div>
        
        <!-- 游戏规则区域 -->
        <div class="game-rules">
            <h2>游戏规则</h2>
            <ul>
                <li>使用方向键控制吃豆人移动</li>
                <li>收集所有金色豆子进入下一关（每个+10分，超级豆+50分）</li>
                <li>吃超级豆可短暂无敌，幽灵会逃避</li>
                <li>避开幽灵，碰撞即失败</li>
                <li>共3个关卡，难度递增</li>
            </ul>
            <!-- 游戏规则列表 -->
        </div>
        
        <!-- 玩家信息区域 -->
        <div class="player-info">
            <input id="playerNameInput" placeholder="输入昵称" maxlength="8">
            <!-- 玩家昵称输入框 -->
            <button id="playerNameBtn">确定</button>
            <!-- 确认按钮 -->
        </div>
        
        <!-- 关卡选择区域 -->
        <div class="level-select-highlight">
            <label for="levelSelect">选择关卡：</label>
            <select id="levelSelect">
                <option value="1">关卡1</option>
                <option value="2">关卡2</option>
                <option value="3">关卡3</option>
            </select>
            <!-- 关卡选择下拉菜单 -->
        </div>
        
        <!-- 游戏容器 -->
        <div class="game-container">
            <!-- 游戏信息显示区域 -->
            <div class="game-info">
                <div>得分: <span id="score">0</span></div>
                <!-- 当前得分 -->
                <div>关卡: <span id="level">1</span>/3</div>
                <!-- 当前关卡 -->
                <button id="restartBtn">重新开始</button>
                <!-- 重新开始按钮 -->
            </div>
            
            <!-- 游戏画布 -->
            <canvas id="gameCanvas" width="560" height="420"></canvas>
            <!-- 绘制游戏画面的画布 -->
            
            <!-- 游戏提示区域 -->
            <div class="tips">
                <b>小贴士：</b>吃豆人可以穿越部分迷宫边界，幽灵会追踪你哦！
                <!-- 游戏提示信息 -->
            </div>
            
            <!-- 提示信息显示区域 -->
            <div id="tipMsg"></div>
        </div>
        
        <!-- 分数图表区域 -->
        <div id="scoreChart" style="width: 560px; height: 300px; margin-top: 20px;"></div>
        <!-- 显示历史分数图表 -->
        
        <!-- 图表类型切换按钮 -->
        <button id="chartTypeBtn" data-type="bar">切换图表</button>
        
        <!-- 排行榜区域 -->
        <div>
            <h3 style="color:#ffe066;text-align: center;">排行榜（前10）</h3>
            <!-- 排行榜标题 -->
            <ul id="leaderboard" class="leaderboard"></ul>
            <!-- 排行榜列表 -->
        </div>

        <!-- 页脚 -->
        <div class="footer">
            <span>© 2025 黄金吃豆人 | 作者：薛馨儿</span>
            <!-- 版权信息 -->
        </div>
        <!-- 引入 ECharts 库 -->
        <script src="libs/echarts.min.js"></script>
        <!-- 引入游戏主逻辑脚本 -->
        <script src="game.js"></script>
    </div>
    <!-- 关卡完成弹窗 -->
<div id="levelCompletePopup" class="popup hidden">
    <!-- 弹窗内容容器，包含所有内容元素 -->
    <div class="popup-content">
        <!-- 弹窗头部区域 -->
        <div class="popup-header">
            <!-- 装饰性表情符号 -->
            <span class="popup-emoji" role="img" aria-label="庆祝表情">😋</span>
            <!-- 主标题 -->
            <h2>恭喜过关！</h2>
        </div>
        <!-- 弹窗主体内容 -->
        <div class="popup-body">
            <!-- 动态显示关卡名称 
                 id: 用于JavaScript更新文本内容 -->
            <p>你完成了 <span id="currentLevelName">关卡 1</span></p>
            <!-- 动态显示得分 
                 id: 用于JavaScript更新得分数值 -->
            <p>得分：<span id="levelScore">0</span></p>
            <!-- 操作按钮容器 -->
            <div class="popup-options">
                <!-- 下一关按钮 
                     id: 用于绑定点击事件 -->
                <button id="nextLevelBtn" aria-label="进入下一关卡">进入下一关</button>
                <!-- 重新挑战按钮 
                     id: 用于绑定点击事件 -->
                <button id="stayLevelBtn" aria-label="重新挑战当前关卡">重新挑战</button>
            </div>
        </div>
        <!-- 装饰元素容器 -->
        <div class="popup-decoration">
            <!-- 普通圆点装饰 -->
            <span class="dot normal-dot"></span>
            <!-- 超级圆点装饰 -->
            <span class="dot super-dot"></span>
            <!-- 吃豆人图标 -->
            <span class="pacman-icon"></span>
        </div>
    </div>
</div>
</body>
</html>